<template>
  <Modal v-model="showModal"
         :footer-hide="true"
         :closable="true"
         title="办理入住"
  >
      <Form ref="addForm" :model="userMode" label-position="left"
            :label-width="100" :rules="rules"
            @keydown.enter.native="formSubmit">
        <FormItem label="姓名" prop="userName">
          <Input v-model="userMode.userDetail.userName" type="text"></Input>
        </FormItem>
        <FormItem label="身份证号" prop="idCard">
          <Input v-model="userMode.userDetail.idCard" type="password"></Input>
        </FormItem>
        <FormItem label="手机号" prop="phone">
          <Input v-model="userMode.phone" type="tel"></Input>
        </FormItem>
        <FormItem label="房间号">

        </FormItem>
      </Form>
  </Modal>
</template>

<script>
import {addUserData} from "@/api/data";

export default {
  name: "intouser",
  data() {
    return {
      userMode:{
        userDetail: {
          userName:"",
          idCard:"",
        },
        phone:""
      },
      showModal:false,
    }
  },
  props: {
    userNameRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '客户名不能为空', trigger: 'blur'}
        ]
      }
    },
    idCardRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '客户身份证号不能为空', trigger: 'blur'}
        ]
      }
    },
    phoneRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '手机号不能为空', trigger: 'blur'}
        ]
      }
    },
    roomRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '请选择房间', trigger: 'blur'}
        ]
      }
    },
  },
  computed:{
    rules() {
      return {
        userName: this.userNameRules,
        idCard: this.idCardRules,
        phone: this.phoneRules,
        room:this.roomRules
      }
    }
  },
  methods:{
    show(){
      this.showModal = true;
    },
    hide(){
      this.showModal = false;
    },
    formSubmit() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.formatterRole();
          addUserData(this.userMode).then(res => {
            let data = res.data;
            if (data && data.code === 200) {
              this.$Message.success("添加成功！");
              this.$emit("refresh")
            } else {
              this.$Message.error(data.message);
            }
            this.showUserModal = false
          })
        }else{
          console.log(this.$refs.addForm)
        }
      });
    },
  }
}
</script>

<style scoped>

</style>
